import { Position, type NodeProps } from "reactflow";
import CustomHandle from "./CustomHandle";

// LLM自定义节点组件
const LLMNode = ({ data, isConnectable, selected }: NodeProps) => {
  return (
    <div
      className={`px-4 py-2 max-w-sm shadow-md rounded-md bg-gray-200 border-5 ${selected ? " border-green-600" : "border-transparent"} `}
    >
      <CustomHandle
        type="target"
        position={Position.Left}
        isConnectable={isConnectable}
      />
      <div className="flex flex-col">
        <div className="flex items-center">
          <div className="rounded-full w-12 h-12 flex items-center justify-center bg-gray-100 shrink-0">
            🤖
          </div>
          <div className="ml-2">
            <div className="text-gray-600 text-lg font-bold">LLM</div>
            <div className="text-gray-500">
              Invoking large language models to answer questions or process
              natural language
            </div>
            <div className="text-gray-500 m">{data.model.name || ""}</div>
          </div>
        </div>
      </div>
      <CustomHandle
        type="source"
        position={Position.Right}
        isConnectable={isConnectable}
      />
    </div>
  );
};

export default LLMNode;
